<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <% include statsheader %>


</head>
<body>
<% include statsabove %>
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <%- include('components/common/menu') %>




    <div id='content'>

        <div id='welcomemessage'>


            <form action='/import' name='submitform' id="submitform" method='post' class='pure-form pure-form-stacked'>

                <input type='text' size="15" maxlength="80" name='search' id="search" class="pure-input" placeholder='youtube video link' onClick="this.setSelectionRange(0, this.value.length)" value="https://youtu.be/arj7oStGLkU" /> &nbsp;&nbsp; <input class="pure-button" type='submit' name="btnSubmit" value="go" style="margin-top: 3px" class="pure-button pure-button-primary">

                <br>&nbsp;<br>
                Add a YouTube video link above and visualize the subtitles, so you can get a clear idea of what the video is about and find the parts that are important.

                <br>&nbsp;<br>
                <% include messages %>

                <label for="extractfilter" class="pure-checkbox">

                </label>

                <label for="savegraph" class="pure-input">
                    saving in <input style="display:inline;" id="savegraph" type='text' size="10" maxlength="15" name='context' value='<% if (context) { %><%= context %><% } else { %>youtube<% } %>'/> context
                </label>
                <br>
                <a href="javascript:" id="advancedpane">+ settings</a>
                <br>

                <div id="advancedsettings">
                    <br>
                  <label for="subphrases" class="pure-radio" id="subphrasescaption">
                      How many subtitle blocks make a statement?
                      <input type="text" name="subphrases" id="processfield" value="6"/>
                  </label>

                  <label for="sublanguage" class="pure-radio" id="processfieldcaption">
                      Default language to extract:
                      <select name="sublanguage" id="sublangselect">
                        <option value="en" selected>English</option>
                        <option value="fr">French</option>
                        <option value="de">German</option>
                        <option value="ru">Russian</option>
                      </select>
                  </label>

                </div>

                <input type="hidden" name="excludesearchquery" value="0">
                <input type="hidden" name="source" value="youtube">
                <input type='hidden' name='limit' value='20' />
                <input type="hidden" name="settings" value="morphemes">
                <input type="hidden" id="hide_always" name="hide_always" value="1">
                <input type="hidden" id="go_next_add" name="go_next_add" value="">
                <input type="hidden" id="selectedContexts" name="selectedContexts" value="">
                <input type="hidden" name="statementid" value="">

                <div id="message"></div>





            </form>   &nbsp;<br>&nbsp;<br>





        </div>

        <div id="graph-container"></div>


    </div>




</div>


<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/jquery-ui.min.js"></script>
<script src="/javascripts/string.min.js"></script>
<script src="/javascripts/underscore-min.js"></script>
<script src="/javascripts/jquery.textcomplete.js"></script>
<script src='/javascripts/jquery.autosize.js'></script>
<script src="/javascripts/ui.js"></script>
<script src="/javascripts/jquery.mobile-events.min.js"></script>


<script>
    ;(function(){

      function youtube_parser(url){
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        var match = url.match(regExp);
        return (match&&match[7].length==11)? match[7] : false;
      }

      var advancedpane = 0;

      $("#advancedsettings").hide();
    //  $('#urlsetting').hide();

      $("#advancedpane").click(function() {
          if (!advancedpane) {
          $("#advancedsettings").show();
          $("#advancedpane").text('– settings');
        //  $("#urlsetting").show();
          advancedpane = 1;
          }
          else {
          $("#advancedsettings").hide();
          $("#advancedpane").text('+ settings');
          advancedpane = 0;

          }

      });

                $('#search').on('input', function() {

                  $('#savegraph').val(youtube_parser($(this).val()));

                });

        $('form#submitform').submit(function(event){



                $(this).find('input[type=submit]').attr('disabled', 'disabled');
                $('#message').html('We are importing the data, this page will automatically reload. If this does not happen in 30 seconds, please, <a href="/<%= user.name %>/'+$('#savegraph').val()+'/edit">click here</a>.');



        });


    })();
</script>




<% include statsbelow %>
</body>
</html>
